<template>
	<div class="proxy">
		<div class="warrp">
			<div class="iconfont back-icon" v-show="comefrom !== 2" @click="backGo">&#xe624;</div>
			<div class="header-title">宝创客资格申请</div>
			<div class="avatar">
				<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(0)">
					<img class="avatar-img" v-if="lenImg0 === 0" :src="defaultAva"/>
					<img class="avatar-img" v-if="imgU0" id="showImg" :src="imgU0" />								
					<input type="file" accept="image/*,type/face" @change="onFileChange0" style="display:none;" id="upfile0">
				</div>		
				<div class="desc">点击添加头像{{titles}}</div>
			</div>
			<div class="bg-img">
				<img :src="defaultAva" height="100%" width="100%" alt="" />				
			</div>
			<div class="drop"></div>
		</div>
		<div class="content">
			<group label-width="5.5em" label-margin-right="2em" >
		    	<x-input title="身份证姓名" :is-type="'china-name'" type="text" v-model="userName" placeholder="请输入您身份证上的姓名"></x-input>
		    	<x-input @on-blur="idCardVaild" :min="15" :max="18" title="身份证号码" v-model="idCard" placeholder="请输入您的身份真的号码"></x-input>
		    	<div class="id-cart vux-1px-t">
			    	<div class="left">身份证照</div>
			    	<div class="right">
			    		<div class="upload_imgs"  id="uploadImgs" @click.stop="autoClick(1)">
			    			<div class="desc iconfont" v-if="lenImg1 === 0">&#xe601;</div>
			    			<div class="uploading" v-show="loadingUp"><spinner :type="'ios'"></spinner></div>	
							<img v-if="imgU1" id="showImg" :src="imgU1" />								
							<input type="file" accept="image/*,mode/camera,type/cid_front" @change="onFileChange1" capture='camera' style="display:none;" id="upfile1">
						</div>
			    	</div>
		    	</div>
			</group>
			<div class="split"></div>
	    	<group label-width="5.5em" label-margin-right="2em" >
		    	<x-input title="手机号码" type="number" v-model="phone" :min="11" :max="11" placeholder="请输入11位本人手机号码"></x-input>
		    	<x-input title="获取验证码" type="number" :show-clear="false" class="weui-vcode" v-model="validateCode">
        			<div class="vali-code vux-1px-l" slot="right" @click="getPhone">获取验证码</div>
      			</x-input>
	    	</group>
	    	<div class="agreement"><div	 class="text">&lt;&lt;宝创客资格申请协议&gt;&gt;</div></div>
	    	<div class="btn" @click="submitForm">提交审核</div>
	    	<div class="bottom-bar"></div>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	import { PopupRadio , Spinner ,GroupTitle, Group, Cell, XInput, Selector, PopupPicker, XButton, XNumber, ChinaAddressV4Data, XAddress, XTextarea, XSwitch } from 'vux'
	export default{
		name : "proxyOpen",
		data(){
			return{
				defaultAva : require('../../assets/images/groups/upload.jpg'),
				upAvatar   : require('../../assets/images/groups/upload.jpg'),
				avatar   : '',
				shopName :'',		//商店名称
				userName : '', 	//用户姓名
				idCard : '', 		//身份证号码
				phone : '', 	//手机号码
				validateCode : '', 	//验证码
				lenImg0	: 0,
				lenImg1 : 0,
				imgU0   : '',
				imgU1   : '',
				okUrl0   : '',
				okUrl1   : '',
				timer        : null,
				resultVCode  : '',
				comefrom     : 1,
				id           : '',
				cardValiRes  : false,
				loadingUp    : false,
				uperror      : '',
				sysType      : '',
				titles       : ''
			}
		},
		mounted(){			
			this.iosOrAndr()
			this.isWeiXin()
			window.callFromQml = this.callFromQml
			window.cameraResult = this.cameraResult
			this.getBackInfo()
		},
		methods:{
			backGo(){
				this.$router.go(-1)
			},
			submitForm(){
				let catId  = ''
				for(let item in this.storeCate){
					if(this.activityType === this.storeCate[item]){
						catId = item
					}
				}
				let shopInfo = {
					userinfo     : this.getParams(),
					name     	 : this.userName,
					cardid       : this.idCard,
					head_pic	 : this.okUrl0,
					cardurl	 	 : this.okUrl1,
					phone        : this.phone,
					validateCode : this.validateCode,
					comefrom     : this.comefrom,
					id		 	 : this.id
				}
				console.log(shopInfo)
				let result = this.validateForm()
				if(result.status){
					this.$axiosPost('/api/onlinestore/makerapply',{
						data : JSON.stringify(shopInfo)
					}).then(res => {
						if(res.code === 200){
							this.$router.replace({path:'/examine',query:{status:0,fromin:'proxy'}})
						}
					})
				}else{
					this.$vux.toast.text(result.msg, 'top')
				}
			},
			getBackInfo(){
				let hasBack = this.$route.query.hasBack
				if(hasBack){
					let info = {
						userinfo : this.getParams()
					}
					this.$axiosPost('/api/onlinestore/makerReedit',{
						data : JSON.stringify(info)
					}).then( res => {
						this.userName = res.name
						this.idCard   = res.cardid
						this.okUrl1   = res.cardurl
						this.imgU1    = res.cardurl
						this.phone    = res.phone
						this.comefrom = res.comefrom
						this.defaultAva = res.head_pic
						this.okUrl0   = res.head_pic
						this.id 	  = res.id
					})
				}
				
			},
			getParams(){
				let userinfo = {
					uid   : getUrlParam('uid')   || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}
				return userinfo
			},
			//获取手机验证码
			getPhone(e){
				let time = 60
				if(this.phone.length !== 11){
					this.$vux.toast.text('请输入11位手机号码','top')					
					return
				}
				if(e.target.innerText !== '获取验证码'){
					return
				}
				if(this.timer){
					clearInterval(this.timer)
				}				
				if(e.target.innerText === '获取验证码'){
					this.timer = setInterval(()=>{
						e.target.innerText = --time
						if(e.target.innerText === '0'){
							e.target.innerText = '获取验证码'
							clearInterval(this.timer)
						}
					},1000)					
					this.$axiosPostno('/utils/sms/sendcode.json',{
							phone : this.phone,
							type  : 7						
					}).then( res => {
						
					})

				}					
			},
			callFromQml(type){
				return type
			},
			cameraResult(type,result){				
				if(type && result){					
					if(type === 'face'){
						this.defaultAva = result
						this.okUrl0     = result
					}
					if(type === 'cid_front'){
						this.imgU1 = result
						this.okUrl1 = result 
					}
				}
			},
			autoClick(index) {
				if(this.comefrom === 2){
					if(index === 0){
						let type = ['album', 'camera']
						this.getWxUpId("defaultAva","okUrl"+index,type)
					}else{
						let type = ['camera']
						this.getWxUpId("imgU"+index,"okUrl"+index,type)
					}					
					return
				}
				if(index === 0){				
					if(this.sysType === 'ios' && this.comefrom === 1){						
						window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'face'})				
						return	
					}
					document.getElementById("upfile0").click();
				}else if(index === 1){
					if(this.sysType === 'ios' && this.comefrom === 1){						
						window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'cid_front'})
						return
					}
					document.getElementById("upfile1").click();	
				}				
			},
			getWxUpId(name,okName,type){
				let _this = this
				this.$wxUploadImg({count: 1,sourceType:type},
				function(localId){
					_this[name] = localId;
				},function(data,localId){
					_this[okName] = data.url;//data.fullurl;
					console.log("相对地址："+data.url)
					console.log("绝对地址："+data.fullurl)
					console.log("单条上传完毕，返回单条对象")
				},function(data){
					console.log("所有上传完毕，返回对象数组")
				});
			},
			iosOrAndr(){
				let u = navigator.userAgent;
			    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
			    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios
			    if(isAndroid) {
			        this.sysType = 'android'
			    } else if (isiOS) {
			        this.sysType = 'ios'
			    }	
			},
			//上传文件
			onFileChange0($event,index) {
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg0 = $event.target.files.length;
				if(this.lenImg0 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU0 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload : self.imgU0
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl0 = res.data.path
					        		self.defaultAva = res.data.fullpath
					        	}
					        	if(res.code === 404){
					        		this.uperror = true
					        		this.upMsg   = '身份证上传失败'
					        	}
					        })
			        }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange1($event,index){
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg1 = $event.target.files.length;
				if(this.lenImg1 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU1 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload :  self.imgU1
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl1 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			
			idCardVaild(){
				let result = ''
				let codeinfo = {
					userinfo : this.getParams(),
					idCardVaild : this.idCard
				}
				if(this.idCard){
					this.$axiosPost('/api/Store/idCardVaild',{
						data : JSON.stringify(codeinfo)
					}).then( res => {
						if(res.status === 0){
							this.$vux.toast.text(res.msg,'top')
							this.cardValiRes = false
							return
						}
						if(res.status === 1){
							this.cardValiRes = true
						}
						
					})
				}
			},
			//表单验证
			validateForm(){
				let result = {
					status : false,
					msg    : ''
				}
				if(!this.okUrl0){
					result.msg = '请上传头像'
					return result
				}
//				if(!this.okUrl0 && this.sysType !== 'ios'){
//					result.msg = '请上传头像'
//					return result
//				}
//				if((this.defaultAva===this.upAvatar) && (this.sysType === 'ios')){
//					result.msg = '请上传头像'
//					return result
//				}
				if(!this.userName){
					result.msg = '请填写您的姓名'
					return result
				}
				if(!this.cardValiRes){
					result.msg = '请输入正确的身份证号'
					return result
				}
				if(!this.imgU1){
					result.msg = '请上传身份证照'
					return result
				}

				if(!this.phone){
					result.msg = '请输入11位手机号码'
					return result
				}
				if(!this.validateCode){
					result.msg = '请输入验证码'
					return result
				}
				result.status = true
				return result
			},
			isWeiXin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			    	this.$wxConfig()
			       	this.comefrom = 2
			    }else{
			    	this.comefrom = 1
			    }
			},
			destroyed(){
				window.cameraResult = ''
			}
		},
		watch:{
			validateCode(){
				if(this.validateCode.length === 6 && this.phone){
					let codeinfo = {
						userinfo : this.getParams(),
						phone : this.phone,
						code  : this.validateCode
					}
					this.$axiosPost('/api/store/smsVaild',{
						data : JSON.stringify(codeinfo)
					}).then( res => {
						if(res.status === 0){
							this.$vux.toast.text(res.msg,'top')
							this.resultVCode = res.msg
						}
					})
				}
			}
		},
		computed:{

		},
		components:{
			Group,
	        GroupTitle,
	        Cell,
	        XInput,
	        Selector,
	        PopupPicker,
	        XAddress,
	        XNumber,
	        XTextarea,
	        XSwitch,
	        PopupRadio,
	        XButton,
	        Spinner
		}
	}
</script>

<style lang="less" scoped>
	@import '~styles/mixin.less';
	@import '~vux/src/styles/1px.less';
	.proxy /deep/ .weui-cells{
		margin-top: 0;
	}
	.proxy /deep/ .weui-label{
		white-space: nowrap;
	}
	.proxy /deep/ .weui-btn{	
		background:#ff1351;
	}
	.proxy /deep/ .weui-switch{
		background:#ff1351 ;
	}
	.proxy /deep/ .weui-switch:checked{
		border-color:#ff1351;
	}
	.proxy /deep/ .weui-cells_radio{
		max-height: 3rem;
	}
	.proxy{
		text-align: left;
		background: #fff;
		.warrp{
			position: relative;
			overflow:hidden;
			margin-top: 0;
			width:100%;
			height: 4.6rem;
			.iphonex;
			.back-icon{
				z-index: 199;
				position: absolute;
				top: .8rem;
				left: .3rem;
				height: .5rem;
				width: .5rem;
				line-height: .5rem;
				text-align: center;
				color: #fff;
				font-size: .24rem;
				background: rgba(0,0,0,.5);
				border-radius: 50%;
			}
			.header-title{
				z-index: 199;
				position: absolute;
				min-width: 2rem;
				left: 50%;
				top: .8rem;
				margin-left: -1rem;
				text-align: center;
				color: #fff;
				font-size: .34rem;
				text-shadow: .05rem .05rem .1rem rgba(0,0,0,.5);
			}
			.avatar{
				position: absolute;
				left: 50%;
				top: 60%;
				margin-top: -1rem;
				margin-left: -1rem;
				z-index: 99;
				height: 2rem;
				width: 2rem;
				border: 1px solid #fff;
				border-radius: 50%;
				.upload_imgs{
					width: 100%;	
					height: 100%;							
					display: flex;
					flex-flow: wrap;				
					align-items: center;	
					position: relative;
					img{
						height: 100%;
						width: 100%;
						border-radius: 50%;
					}	
				}
				.error{
					border-color: red;
				}	
				.desc{
					width: 100%;
					line-height: .5rem;
					text-align: center;
					z-index: 100;
					color: #fff;
					font-size: .2rem;
					text-shadow: .05rem .05rem .1rem rgba(0,0,0,.5);
				}
			}
			.bg-img{
				z-index: -100;
				width: 100%;
				height: 100%;
				filter: blur(.2rem);
			}	
			.drop{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 50;
				height: 100%;
				width: 100%;
				background: rgba(255,255,255,.2);
			}		
		}
		.title{
			line-height: .8rem;
			text-align: center;
		}
		.vali-content{
			position: relative;
			padding: 0 .3rem .6rem .3rem;
			display: flex;
			.avatar{
				overflow: hidden;
				height: 1.6rem;
				width: 1.6rem;
				border-radius: .1rem;
			}
			.vali-desc{
				flex: 1;
				margin-left: .2rem;
				.desc2{
					margin-top: .3rem;
					color:#9a9a9a ;
				}
			}
			.vali-btn{
				position: absolute;
				bottom: .1rem;
				right: .4rem;
				width: 1.5rem;
				height: .5rem;
				line-height: .5rem;
				text-align: center;
				color: #2a64f7;
				border: 1px solid #2a64f7;
				border-radius: .3rem;
				font-size: .2rem;
			}
		}
		.split{
			height: .28rem;
			background: #eee;
		}
		.demo{
			padding: .2rem .3rem;
			background: #eee;
			.demo-title{
				line-height: .6rem;
			}
			.demo-desc{
				color: #666666;
				font-size: .2rem;
			}
			.demo-img{
				overflow: hidden;
				margin: 0 auto;
				width: 4.4rem;
				height: .8rem;
			}
		}
		.agreement{
			padding: 0 .3rem;
			line-height: 1rem;
			color: #d49931;
			.text{
				margin: .3rem auto;
				min-width: 2.9rem;
				height: .4rem;
				line-height: .4rem;
				text-align: center;
			}
		}
		.vali-code{
			width: 1.4rem;
			padding-left: .2rem;
			text-align: center;
			font-size: .24rem;
			color: #7ec420;
		}
		.id-cart{
			position: relative;
			display: flex;
			padding: .2rem .3rem;
			height: .1.2rem;	
			line-height: 1.2rem;
			font-size: .34rem;	
			.left{
				height: .88rem;
				white-space: nowrap;
				width: 1.88rem;
				height: 100%;				
				margin-right: .68rem;				
			}
			.right{
				position: relative;
				flex: 1;				
				font-size: .28rem;
				color: #757575;
				text-align: right;	
				.upload_imgs {
					position: absolute;
					right: 0;
					width: 60%;	
					height: 1.2rem;								
					border: 1px dashed #ccc;
					border-radius: .15rem;
					display: flex;
					flex-flow: wrap;				
					align-items: center;	
					.desc{
						width: 100%;
						font-size: .5rem;
						color: #ccc;
						text-align: center;
					}
					.uploading{
						z-index: 150;
						position: absolute;
						right: 40%;
						top: -.2rem;
					}		
					#showImg {					
						width: 60%;
						height: 1rem;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
				.error{
					border-color: red;
				}	
			}
		}
		.btn{
			margin: 0 auto;
			width: 90%;
			height: .8rem;
			line-height: .8rem;
			text-align: center;
			background: #7ec420;
			color: #fff;
			border-radius: .1rem;
		}
		.bottom-bar{
			height: .3rem;
			background: #fff;
		}
	}
</style>